<template>
  <div class="ptfwsj">
    <div class="header space-between align-center w100">
      <div class="flex align-center">
        <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang3_f8f39a01722849fbb749aefb25d9c755.png'" class="img" />
        <div>平台服务数据</div>
        <div class="value">{{ info.val25 || '' }}</div>
      </div>
      <img
        v-show="show"
        @click="handleClick"
        :src="imgUrl + '/profile/personinfo/2023/6/20/lang2_d966d366dae5476a8e6889b30b1b8c82.png'"
        class="img1"
      />
    </div>
    <div class="list">
      <div class="box flex align-center space-between">
        <div class="item flex-column align-center">
          <div>总交易额</div>
          <div class="text">0</div>
        </div>
        <div class="item flex-column align-center">
          <div>交易订单数</div>
          <div class="text">0</div>
        </div>
        <div class="item flex-column align-center">
          <div>助农贷款数</div>
          <div class="text">44</div>
        </div>
        <div class="item flex-column align-center">
          <div>总贷款金额</div>
          <div class="text">2100000</div>
        </div>
      </div>
      <div class="box flex align-center space-between">
        <div class="item flex-column align-center">
          <div>总交易额</div>
          <div class="text">0</div>
        </div>
        <div class="item flex-column align-center">
          <div>交易订单数</div>
          <div class="text">0</div>
        </div>
        <div class="item flex-column align-center">
          <div>助农贷款数</div>
          <div class="text">44</div>
        </div>
        <div class="item flex-column align-center">
          <div>总贷款金额</div>
          <div class="text">2100000</div>
        </div>
      </div>
      <div class="box flex align-center space-between">
        <div class="item flex-column align-center">
          <div>总交易额</div>
          <div class="text">0</div>
        </div>
        <div class="item flex-column align-center">
          <div>交易订单数</div>
          <div class="text">0</div>
        </div>
        <div class="item flex-column align-center">
          <div>助农贷款数</div>
          <div class="text">44</div>
        </div>
        <div class="item flex-column align-center">
          <div>总贷款金额</div>
          <div class="text">2100000</div>
        </div>
      </div>
      <div class="box flex align-center space-between">
        <div class="item flex-column align-center">
          <div>总交易额</div>
          <div class="text">0</div>
        </div>
        <div class="item flex-column align-center">
          <div>交易订单数</div>
          <div class="text">0</div>
        </div>
        <div class="item flex-column align-center">
          <div>助农贷款数</div>
          <div class="text">44</div>
        </div>
        <div class="item flex-column align-center">
          <div>总贷款金额</div>
          <div class="text">2100000</div>
        </div>
      </div>
    </div>
    <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang4_73a1fc1e81c446e5894ac4101272c833.png'" class="w100" />
  </div>
</template>

<script>
export default {
  name: 'Ptfwsj',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API
    }
  },
  methods: {
    handleClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.ptfwsj {
  margin-left: 0.1rem;
  //height: 4.16rem;
  height: calc((100vh - 1.2rem) / 3);

  .header {
    background-size: 100% 100%;
    font-size: 0.18rem;
    height: 0.42rem;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang7_a953852ebaf143d2994fe879e106efda.png');
    background-repeat: no-repeat;
    background-position-x: center;
    box-sizing: border-box;

    .img {
      width: 0.16rem;
      height: 0.14rem;
      margin-left: 0.1rem;
      margin-right: 0.15rem;
    }

    .img1 {
      width: 0.36rem;
      height: 0.16rem;
      margin-right: 0.1rem;
    }

    .value {
      color: #00cdff;
      margin-left: 0.1rem;
    }
  }

  .list {
    height: 3.4rem;

    .box {
      width: 6.21rem;
      height: 0.77rem;
      background: linear-gradient(0deg, rgba(0, 205, 255, 0), rgba(0, 205, 255, 0.2));
      margin: 0.1rem auto;
      border: 0.01rem solid;

      .item {
        width: 25%;

        .text {
          color: #00cdff;
          font-size: 0.18rem;
        }
      }
    }
  }
}
</style>